<template>
  <div>
    <h1>购物车</h1>
    <div id="map-content" style="width: 500px; height: 700px"></div>
  </div>
</template>

<script>
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
import { Map, View } from "ol";
import { fromLonLat } from "ol/proj";
export default {
  name: "shopcar",
  data() {
    return {};
  },
  mounted() {
    this.mapstart();
  },
  methods: {
    mapstart() {
      new Map({
        //目标容器
        target: "map-content",
        //图层
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        //视图
        view: new View({
          center: fromLonLat([0, 0]),
          zoom: 2,
        }),
      });
    },
  },
};
</script>
<style>
</style>